<template>
	<view :class="$attrs">
		<view class="mb-8"><text class="text-bold">活动商品</text></view>
		<view v-if="goodsList.length === 0" class="radius-8 uni-bg-color h-44 p-12 flex item-center mb-12" style="color:#A5A7A9;">
			<view style="width:16%;"><text>序号</text></view>
			<view style="width:36%;"><text>商品名称</text></view>
			<view style="width:24%;"><text>商品数量</text></view>
			<view style="width:24%;"><text>商品价格</text></view>
		</view>
		<view v-else class="radius-8 mb-12 text-color-regular" style="border:1px solid rgba(51, 51, 51, 0.30);">
			<view class="uni-bg-color h-44 py-12 pl-12 pr-21 flex item-center">
				<view style="width:16%;"><text class="text-color-regular">序号</text></view>
				<view style="width:36%;"><text class="text-color-regular">商品名称</text></view>
				<view style="width:24%;"><text class="text-color-regular">商品数量</text></view>
				<view style="width:24%;"><text class="text-color-regular">商品价格</text></view>
			</view>
			<view v-for="(item,i) in goodsList" :key="i" class="uni-bg-white relative h-44 py-12 pl-12 pr-21 flex item-center">
				<view style="width:16%;"><text>{{i+1}}</text></view>
				<view class="text-cut" style="width:36%;"><text>{{item.goodsName}}</text></view>
				<view style="width:24%;"><text>{{item.goodsNum}}</text></view>
				<view style="width:24%;"><text>{{numberFormat(item.goodsPrice * item.goodsNum)}}</text></view>
				<image v-if="!disable" class="absolute w-12 h-12" style="right:32px;" src="@/static/svg/publish/icon-edit.svg" @click="onEdit(item, i)"></image>
				<image v-if="!disable" class="absolute w-12 h-12" style="right:6px;" src="@/static/svg/publish/icon-trash.svg" @click="onDelete(item, i)"></image>
			</view>
		</view>
		<button v-if="!disable" class="h-48 flex center bg-white color-primary fs-16 border-primary radius-8" @click="openPopup">
			<image class="w-14 h-14 mr-4" src="@/static/svg/publish/icon-add.svg"></image>
			<text>添加商品</text>
		</button>
		<uni-popup ref="popup" type="center">
			<view class="uni-bg-white radius-8 px-20 py-16 text-color-regular fs-14" style="width:80vw;box-shadow:0px 2px 6px 0px rgba(0, 0, 0, 0.20);">
				<view class="font-normal h-22 leading-22">请选择商品类型</view>
				<view class="flex justify-between item-center mt-9" @click="toAddGoods(1)">
					<view>
						<view class="font-semibold h-22 leading-22">商户商品</view>
						<view class="text-color-hint h-22 leading-22">选择关联商户上架的商品</view>
					</view>
					<image v-if="addType===1" class="size-16" src="@/static/svg/activity/icon-radio-check-blue.svg"></image>
					<image v-else class="size-16" src="@/static/svg/activity/icon-radio-default.svg"></image>
				</view>
				<view class="h-1 bg-default my-9"></view>
				<view class="flex justify-between item-center mt-9" @click="toAddGoods(2)">
					<view>
						<view class="font-semibold h-22 leading-22">多商户通用券</view>
						<view class="text-color-hint h-22 leading-22">创建多店通用商品券</view>
					</view>
					<image v-if="addType===2" class="size-16" src="@/static/svg/activity/icon-radio-check-blue.svg"></image>
					<image v-else class="size-16" src="@/static/svg/activity/icon-radio-default.svg"></image>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import { ref, unref, toRaw, computed } from 'vue'
	import { numberFormat } from '@/utils/index.js'
	import { usePublishStore } from '@/stores/modules/publish.js'
	
	const publishStore = usePublishStore()
	
	const props = defineProps({
		modelValue: {
			type: Array,
			default: []
		},
		disable: {
			type: Boolean,
			default: false
		},
	})
	
	const emits = defineEmits(['update:modelValue'])
	
	const addType = ref(0)
	// const goodsList = ref(props.modelValue)
	const goodsList = computed(() => publishStore.goodsList)
	
	const popup = ref()
	const openPopup = () => {
		addType.value = 0
		popup.value.open()
	}
	
	const onDelete = (item, index) => {
		goodsList.value.splice(index, 1)
		// emits('update:modelValue', unref(goodsList))
	}
	
	const onEdit = (item,index)=>{
		if(item.mulState===1){
			toAddGoods(1)
			return;
		}
		
		uni.navigateTo({
				url: `/pagesG/publish/add-merchant-coupon`,
				events: {
					onMerchantCouponAdd: (data) => {
						goodsList.value[index] = toRaw(data.merchantCoupon)
						emits('update:modelValue', unref(goodsList))
					}
				},
				success: (res) => {
					const data = {
						goodsName:item.goodsName,
						goodsPrice:item.goodsPrice,
						details:item.details,
						goodsNum:item.goodsNum,
						merchantIds: item.merchantIds
					};
					// 通过eventChannel向被打开页面传送数据
					res.eventChannel.emit('presetMerchantCoupon', { data})
				}
			})
	};

	const toAddGoods = (type) => {
		// console.log('添加商品', publishStore.goodsList, publishStore.tempGoodsList, toRaw(publishStore.goodsList), publishStore.goodsList.map(it => toRaw(it)))
		publishStore.tempGoodsList = publishStore.goodsList.map(it => toRaw({...it}))//[...toRaw(publishStore.goodsList)] // 复制一份可编辑的商品
		addType.value = type
		let merchantIds = []
		goodsList.value.forEach(item => {
			if(item.mulState === 2){
				merchantIds = merchantIds.concat(item.merchantIds)
			}else{
				merchantIds.push(item.merchantId)
			}
		})
		publishStore.merchantIds = [...new Set(merchantIds)]
		if (type === 1) {
			uni.navigateTo({
				url: `/pagesG/publish/add-goods`,
			})
		} else {
			uni.navigateTo({
				url: `/pagesG/publish/add-merchant-coupon`,
				events: {
					onMerchantCouponAdd: (data) => {
						console.log('多商户券', data, goodsList.value, toRaw(data.merchantCoupon))
						goodsList.value.push(toRaw(data.merchantCoupon))
						emits('update:modelValue', unref(goodsList))
					}
				}
			})
		}

		popup.value.close()
	}
</script>

<style lang="scss" scoped>
	.tooltip-popup {
		position: relative;
		background: url('@/static/svg/publish/bg-tooltip.svg') no-repeat;
		background-size: 100%;
		height: 74px;
		width: 114px;
		padding-top: 14px;
		padding-left: 12px;
		padding-bottom: 8px;
	}
</style>